<div [class]="model.cssClasses.rootCheckbox">
  <div [class]="model.getCheckboxItemCss()">
    <label [class]="model.cssClasses.checkboxLabel">
      <input
        type="checkbox"
        [value]="model.booleanValue" [class]="model.cssClasses.controlCheckbox" 
        [attr.name]="model.name" [id]="model.inputId"
        [attr.aria-required]="model.a11y_input_ariaRequired"
        [attr.aria-label]="model.a11y_input_ariaLabel"
        [attr.aria-labelledby]="model.a11y_input_ariaLabelledBy"
        [attr.aria-describedby]="model.a11y_input_ariaDescribedBy"
        [attr.aria-invalid]="model.a11y_input_ariaInvalid"
        [attr.aria-errormessage]="model.a11y_input_ariaErrormessage"
        [(ngModel)]="model.booleanValue" [value]="model.booleanValue"
        [disabled]="model.isDisabledAttr" [readonly]="model.isReadOnlyAttr" [indeterminate]="model.isIndeterminate"
      />
      <span [class]="model.cssClasses.checkboxMaterialDecorator">
        <svg *ngIf="!!model.svgIcon" [class]="model.cssClasses.checkboxItemDecorator">
          <use [attr.xlink:href]="model.svgIcon"></use>
        </svg>
        <span class="check"></span>
      </span>
      <span *ngIf="model.isLabelRendered" [class]="model.cssClasses.checkboxControlLabel" [id]="model.labelRenderedAriaID">
        <sv-ng-element-title-actions [element]="model"></sv-ng-element-title-actions>
      </span>
    </label>
    <div *ngIf="model.canRenderLabelDescription" [class]="model.cssDescription" [attr.id]="model.ariaDescriptionId" [model]="model.locDescription" sv-ng-string></div>
  </div>
</div>